<template>
  <div class="process">
    <h2>交易纠纷处理</h2>
    <div class="search-container">
      <div class="box">
        <el-input class="el-input" v-model="searchQuery" placeholder="输入纠纷编号搜索" @keyup.enter="searchUsers"></el-input>
        <select class="el-input border" v-model="selectedCategory">
          <option value="">状态</option>
          <option value="待处理">待处理</option>
          <option value="已处理">已处理</option>
        </select>
        <select class="el-input border" v-model="selectedDispute">
          <option value="">纠纷类型</option>
          <option value="商品质量问题">商品质量问题</option>
          <option value="商品描述不符">商品描述不符</option>
          <option value="售后服务">售后服务</option>
        </select>
        <select class="el-input border" v-model="selectedTimeRange">
          <option value="">时间范围</option>
          <option value="最近7天">最近7天</option>
          <option value="最近15天">最近15天</option>
          <option value="最近30天">最近30天</option>
        </select>
        <button class="border height" @click="reset">
          <img src="../../assets/icons/none.png" alt=""> 重置
        </button>
        <el-button @click="deleteSelectedUsers" class="el-button height">
          <img src="../../assets/icons/down.png" alt=""> 批量审核
        </el-button>
      </div>

      <el-table :data="currentUsers" stripe ref="userTable">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column prop="DisputeId" label="纠纷编号"></el-table-column>
        <el-table-column label="订单信息" width="200">
          <template slot-scope="scope">
            <p>商品：{{ scope.row.GoodsNamegoods }}</p>
            <p>订单号：{{ scope.row.OrderId }}</p>
          </template>
        </el-table-column>
        <el-table-column label="买家信息">
          <template slot-scope="scope">
            <p>{{ scope.row.BuyerName }}</p>
            <p>{{ scope.row.BuyerEmail }}</p>
          </template>
        </el-table-column>
        <el-table-column label="卖家信息">
          <template slot-scope="scope">
            <p>{{ scope.row.SellName }}</p>
            <p>{{ scope.row.SellEmail }}</p>
          </template>
        </el-table-column>
        <el-table-column label="纠纷类型">
          <template slot-scope="scope">
            <span :style="{
              backgroundColor: getViolationColor(scope.row.DisputeType),
              color: getViolationTextColor(scope.row.DisputeType),
              padding: '3px 5px', borderRadius: '3px'
            }">
              {{ scope.row.DisputeType }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="DisputeTime" label="提交时间">
          <template slot-scope="scope">
            <div>
              {{ formatTime(scope.row.DisputeTime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="DisputeState" label="状态">
          <template slot-scope="scope">
            <span :style="{
              backgroundColor: getStateColor(scope.row.DisputeState),
              color: getStateTextColor(scope.row.DisputeState),
              padding: '3px 5px', borderRadius: '3px'
            }">
              {{ scope.row.DisputeState }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <p style="color: blue;cursor: pointer;" @click="showDetailDialog(scope.row)">查看详情</p>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 20, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalUsers">
      </el-pagination>
    </div>

    <!-- 查看详情弹窗 -->
    <el-dialog :visible.sync="dialogVisible" SellMain="查看详情" width="800px">
      <div class="detail-content">
        <div class="detail-row">
          <div class="detail-item">
            <p class="detail-label">商品名字</p>
            <p>{{ detail.GoodsNamegoods }}</p>
          </div>
          <div class="detail-item">
            <p class="detail-label">提交时间</p>
            <p>{{ formatTime(detail.DisputeTime) }}</p>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item">
            <p class="detail-label">卖家名字</p>
            <p>{{ detail.SellName }}</p>
          </div>
          <div class="detail-item">
            <p class="detail-label">买家名字</p>
            <p>{{ detail.BuyerName }}</p>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item">
            <p class="detail-label">卖家ID</p>
            <p>{{ detail.SellEmail }}</p>
          </div>
          <div class="detail-item">
            <p class="detail-label">买家ID</p>
            <p>{{ detail.BuyerEmail }}</p>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item">
            <p class="detail-label">纠纷类型</p>
            <p>{{ detail.DisputeType }}</p>
          </div>
          <div class="detail-item">
            <p class="detail-label">成交金额</p>
            <p>{{ detail.GoodsPrice }}</p>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item">
            <p class="detail-label">买家申诉内容</p>
            <p>{{ detail.BuyereMain }}</p>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item">
            <p class="detail-label">卖家申诉内容</p>
            <p>{{ detail.SellMain }}</p>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item">
            <p class="detail-label">申诉材料</p>
            <span><img :src="detail.DisputePictureone" class="picture"></span>
            <span><img :src="detail.DisputePicturetwo" class="picture"></span>
            <span><img :src="detail.DisputePicturethree" class="picture"></span>
            <span><img :src="detail.DisputePicturefour" class="picture"></span>
          </div>
        </div>
        <div>
          <span class="detail-label">处理方式：</span>
          <el-select v-model="detail.DisputeState" placeholder="请选择处理方式" @change="handleDetailStatusChange">
            <el-option label="同意退款" value="同意退款"></el-option>
            <el-option label="驳回申请" value="驳回申请"></el-option>
            <el-option label="部分退款" value="部分退款"></el-option>
          </el-select>

          <div v-if="detail.DisputeState" style="margin-top: 10px;">
            <label>退款金额：</label>
            <!-- 根据处理方式显示不同输入 -->
            <div v-if="detail.DisputeState === '部分退款'">
              <el-input style="margin-top: 10px; width: 100px; display: inline-block;" v-model="detail.batchDiscount"
                type="number" placeholder="折扣(折)" min="1" max="10" integer @input="calculatePartialRefund"></el-input>
              <span style="margin: 0 10px">折</span>
              <el-input style="margin-top: 10px; width: 200px; display: inline-block;" v-model="detail.DisputeMoney"
                :disabled="true" placeholder="自动计算"></el-input>
            </div>
            <div v-else>
              <el-input style="margin-top: 10px;" v-model="detail.DisputeMoney" :disabled="true"
                placeholder="请输入退款金额，将发送给买卖双方"></el-input>
            </div>
            <div style="margin-top: 10px;">
              <label>处理意见：</label>
              <el-input style="margin-top: 10px;" v-model="detail.DisputeRemark"
                placeholder="请输入处理意见，将发送给买卖双方"></el-input>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="close-button">关闭</el-button>
        <el-button @click="orderfix" class="confirm-button">确认</el-button>
      </span>
    </el-dialog>

    <!-- 批量审核提示框 -->
    <el-dialog :visible.sync="deleteDialogVisible" SellMain="批量审核" width="800px">
      <h3 style="margin:-20px 0 20px 0;font-size: 18px;">审核数量 ({{ reviewedCount }}/{{ totalToReview }})</h3>
      <div v-if="selectedUsers.length > 0">
        <div class="pop">
          <p>商品名称：<span>{{ selectedUsers[currentIndex].GoodsNamegoods }}</span></p>
          <p>订单号：<span>{{ selectedUsers[currentIndex].OrderId }}</span></p>
          <p>纠纷类型:<span> {{ selectedUsers[currentIndex].DisputeType }}</span></p>
          <p>成交金额: <span>{{ selectedUsers[currentIndex].GoodsPrice }}</span></p>
          <p>申诉时间: <span>{{ selectedUsers[currentIndex].DisputeTime }}</span></p>
          <p>买家申诉内容: </p>
          <span>{{ selectedUsers[currentIndex].BuyereMain }}</span>
          <p>卖家申诉内容: </p>
          <span>{{ selectedUsers[currentIndex].SellMain }}</span>
          <p>申诉材料:</p>
          <div style="margin-top: 10px;">
            <img :src="selectedUsers[currentIndex].DisputePictureone" class="picture">
            <img :src="selectedUsers[currentIndex].DisputePicturetwo" class="picture">
            <img :src="selectedUsers[currentIndex].DisputePicturethree" class="picture">
            <img :src="selectedUsers[currentIndex].DisputePicturefour" class="picture">
          </div>
        </div>
      </div>
      <div style="margin-top: 20px;font-size: 16px;">
        <span style="font-size: 18px;margin-right: 20px;">处理方式:</span>
        <el-radio-group v-model="batchStatus" @change="handleBatchStatusChange">
          <el-radio :label="'同意退款'">同意退款</el-radio>
          <el-radio :label="'驳回申请'">驳回申请</el-radio>
          <el-radio :label="'部分退款'">部分退款</el-radio>
        </el-radio-group>
      </div>
      <div v-if="batchStatus" style="margin-top: 20px;font-size: 17px;">
        <label>退款金额：</label>
        <!-- 根据处理方式显示不同输入 -->
        <div v-if="batchStatus === '部分退款'">
          <el-input v-if="currentIndex < selectedUsers.length"
            style="margin-top: 10px; width: 100px; display: inline-block;"
            v-model="selectedUsers[currentIndex].batchDiscount" type="number" placeholder="折扣(折)" min="1" max="10"
            integer></el-input>
          <span style="margin: 0 10px">折</span>
          <el-input v-if="currentIndex < selectedUsers.length"
            style="margin-top: 10px; width: 200px; display: inline-block;"
            v-model="selectedUsers[currentIndex].DisputeMoney" :disabled="true" placeholder="自动计算"></el-input>
        </div>
        <div v-else>
          <el-input v-if="currentIndex < selectedUsers.length" style="margin-top: 10px;"
            v-model="selectedUsers[currentIndex].DisputeMoney" :disabled="true"
            placeholder="请输入退款金额，将发送给买卖双方"></el-input>
        </div>
        <label style="margin-top: 10px;">处理意见：</label>
        <el-input v-if="currentIndex < selectedUsers.length" style="margin-top: 10px;"
          v-model="selectedUsers[currentIndex].DisputeRemark" placeholder="请输入处理意见，将发送给买卖双方"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">关闭</el-button>
        <el-button @click="handleNextItem">下一个</el-button>
        <el-button @click="confirmBatchReview">确认提交</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import jq from "jquery"
import { Message } from 'element-ui';
export default {
  data() {
    return {
      order: [],
      searchQuery: '',
      currentPage: 1,
      pageSize: 10,
      totalUsers: 0,
      detail: {},
      dialogVisible: false,
      remark: '',
      selectedCategory: '',
      selectedDispute: '',
      deleteDialogVisible: false,
      selectedTimeRange: '',
      batchStatus: '',
      batchRemark: '',
      selectedUsers: [],
      currentIndex: 0,
      localBatchData: [],
      batchDiscount: null,
    };
  },
  mounted() {
    this.goodsorder()
    // 移除输入框聚焦时的边框样式
    document.querySelectorAll('.el-input input, .el-input select').forEach(input => {
      input.addEventListener('focus', () => {
        input.style.outline = 'none';
        input.style.borderColor = '#e2e2e2';
      });
    });
  },
  computed: {
    currentUsers() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      let filteredUsers = this.order.filter(user => {
        //  DisputeType 非空校验
        const isDisputeTypeValid = user.DisputeType !== undefined && user.DisputeType !== null && user.DisputeType !== '';
        const isDisputeIdValid = user.DisputeId !== undefined && user.DisputeId !== null;
        const isSearchMatch = user.GoodsNamegoods.includes(this.searchQuery) || String(user.DisputeId).includes(this.searchQuery);
        const isCategoryMatch = this.selectedCategory === '' || user.DisputeState === this.selectedCategory;
        const isDisputeMatch = this.selectedDispute === '' || user.DisputeType === this.selectedDispute;
        const isTimeRangeMatch = this.selectedTimeRange === '' || this.isWithinTimeRange(user.DisputeTime, this.selectedTimeRange);

        const isDisputeStateValid = user.DisputeState !== undefined && user.DisputeState !== null && user.DisputeState !== '';

        return isDisputeIdValid && isDisputeTypeValid && isSearchMatch && isCategoryMatch && isDisputeMatch && isTimeRangeMatch && isDisputeStateValid;
      });
      return filteredUsers.slice(start, end);
    },
    totalToReview() {
      return this.selectedUsers.length;
    },
    reviewedCount() {
      return this.currentIndex + (this.batchStatus ? 1 : 0);
    }
  },
  methods: {
    handleDetailStatusChange(val) {
      switch (val) {
        case '同意退款':
          this.detail.DisputeMoney = this.detail.GoodsPrice;
          this.detail.batchDiscount = null; // 重置折扣
          break;
        case '驳回申请':
          this.detail.DisputeMoney = '0';
          this.detail.batchDiscount = null; // 重置折扣
          break;
        case '部分退款':
          this.detail.DisputeMoney = null; // 清空金额，等待折扣计算
          this.detail.batchDiscount = null; // 重置折扣
          break;
      }
    }, calculatePartialRefund() {
      if (this.detail.batchDiscount && this.detail.GoodsPrice) {
        this.detail.DisputeMoney = (this.detail.GoodsPrice * this.detail.batchDiscount / 10).toFixed(2);
      } else {
        this.detail.DisputeMoney = null;
      }
    },
    formatTime(timeStr) {
      if (!timeStr) return '';
      const date = new Date(timeStr);
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    },
    //活动查看
    goodsorder() {
      let _this = this;
      jq.ajax({
        type: "get",
        url: "http://127.0.0.1:3000/goodsorder",
        data: {
          value: this.add
        },
        success(res) {
          console.log('res', res);
          if (res.data == "") {
            return;
          } else {
            _this.order = res.data
            console.log('_this.order', _this.order);
          }
        }
      });
    },
    // 活动状态方法
    orderfix() {
      const { DisputeState, DisputeRemark, GoodsPrice, batchDiscount, GoodsNamegoods } = this.detail;
      // 处理部分退款的金额计算
      let DisputeMoney = this.detail.DisputeMoney;
      if (DisputeState === '部分退款' && batchDiscount) {
        DisputeMoney = (GoodsPrice * batchDiscount / 10).toFixed(2);
      }

      jq.ajax({
        type: 'put',
        url: `http://127.0.0.1:3000/orderfix`,
        data: {
          DisputeState,
          DisputeRemark,
          DisputeMoney,
          GoodsSta: "已完成",
          DisputeId: this.detail.DisputeId
        },
        success(res) {
          if (res.status === 200) {
            Message.success(`更新商品${GoodsNamegoods} 成功`);
            console.log('更新商品成功');
            // 处理成功后关闭弹窗并刷新数据
            this.dialogVisible = false;
            // this.goodsorder(); // 重新获取数据（假设接口需要重新请求）
          } else {
            Message.error('更新失败');
            this.dialogVisible = false;
            console.log('更新商品失败，响应状态码:', res.status);
          }
        },
        error(err) {
          console.error('更新失败:', err);
          Message.error('更新失败');
        }
      });
    },

    searchUsers() {
      this.currentPage = 1; // 搜索时重置到第一页
      // 不需要手动过滤，计算属性会自动处理
      // 只需要更新总数量
      this.totalUsers = this.advertise.filter(advertise =>
        advertise.GoodsNamegoods.includes(this.searchQuery)
      ).length;
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      // 切换页大小后重置到第一页
      this.currentPage = 1;
      // 更新总数量
      this.totalUsers = this.advertise.filter(advertise =>
        advertise.GoodsNamegoods.includes(this.searchQuery)
      ).length;
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
    },
    isWithinTimeRange(timeStr, timeRange) {
      const date = new Date(timeStr);
      const now = new Date();
      const diffTime = Math.abs(now - date);
      if (timeRange === '最近7天') {
        return diffTime < 7 * 24 * 60 * 60 * 1000;
      } else if (timeRange === '最近15天') {
        return diffTime < 15 * 24 * 60 * 60 * 1000;
      } else if (timeRange === '最近30天') {
        return diffTime < 30 * 24 * 60 * 60 * 1000;
      }
      return true;
    },
    search() {
      const filteredUsers = this.order.filter(user => {
        const isSearchMatch = user.GoodsNamegoods.includes(this.searchQuery) || String(user.OrderId).includes(this.searchQuery);
        const isCategoryMatch = this.selectedCategory === '' || user.DisputeType === this.selectedCategory;
        const isSellerMatch = this.selectedSeller === '' || user.SellName === this.selectedSeller;
        const isStatusMatch = this.selectedStatus === '' || user.DisputeState === this.selectedStatus;
        return isSearchMatch && isCategoryMatch && isSellerMatch && isStatusMatch;
      });
      this.totalUsers = filteredUsers.length;
      // 这里可以编写调用后端接口的逻辑，将搜索条件传递过去
      console.log('搜索条件：', {
        searchQuery: this.searchQuery,
        selectedCategory: this.selectedCategory,
        selectedDispute: this.selectedDispute,
      });
    },
    reset() {
      // 重置所有输入框和选择框的值
      this.searchQuery = '';
      this.selectedCategory = '';
      this.selectedDispute = '';
      this.selectedTimeRange = '';
    },
    sendRemark() {
      // 这里可以添加发送备注的逻辑，例如调用API
      console.log('发送处理备注:', this.remark);
      // 模拟发送成功，实际中应根据API返回结果判断
      Message.success('发送成功');
      this.remark = '';
    },

    getStateColor(DisputeState) {
      switch (DisputeState) {
        case '同意退款':
          return '#E0F2F7 ';
        case '驳回申请':
          return '#FFFFE0 ';
        case '部分退款':
          return '#E8F5E9 ';
        case '待处理':
          return '#fff1da';
        default:
          return 'transparent';
      }
    },
    getStateTextColor(DisputeState) {
      switch (DisputeState) {
        case '同意退款':
          return '#0056b3';
        case '驳回申请':
          return '#B8860B';
        case '部分退款':
          return '#006400';
        case '待处理':
          return '#FF6347';
        default:
          return 'black';
      }
    },
    getViolationColor(Violationgoods) {
      switch (Violationgoods) {
        case '商品质量问题':
          return '#E0F2F7';
        case '商品描述不符':
          return '#FFFFE0';
        case '售后服务':
          return '#E8F5E9';
        default:
          return 'transparent';
      }
    },
    getViolationTextColor(Violationgoods) {
      switch (Violationgoods) {
        case '商品质量问题':
          return '#0056b3';
        case '商品描述不符':
          return '#B8860B';
        case '售后服务':
          return '#006400';
        default:
          return 'black';
      }
    },
    showDetailDialog(row) {
      if (!row) {
        console.error('传递的行数据row未定义');
        return;
      }
      this.detail = {
        ...row,
        batchDiscount: null, // 初始化折扣字段
        DisputeMoney: row.DisputeMoney || '' // 保留原有金额
      };
      this.dialogVisible = true;
    },
    handleBatchStatusChange(val) {
      const currentUser = this.selectedUsers[this.currentIndex];
      if (!currentUser) return;

      switch (val) {
        case '同意退款':
          currentUser.DisputeMoney = currentUser.GoodsPrice;
          break;
        case '驳回申请':
          currentUser.DisputeMoney = '0';
          break;
        case '部分退款':
          // 初始化折扣和金额（避免上次数据残留）
          currentUser.batchDiscount = null;
          currentUser.DisputeMoney = null;
          break;
      }
    },
    handleNextItem() {
      if (!this.batchStatus) {
        Message.warning('请先选择处理方式');
        return;
      }
      const currentUser = this.selectedUsers[this.currentIndex];
      // 处理部分退款的折扣计算
      if (this.batchStatus === '部分退款') {
        if (!currentUser.batchDiscount) {
          Message.warning('请输入有效折扣（1-10折）');
          return;
        }
        currentUser.DisputeMoney = (currentUser.GoodsPrice * currentUser.batchDiscount / 10).toFixed(2);
      }
      // 处理当前项
      const { DisputeMoney, DisputeRemark } = currentUser;

      // 保存到本地缓存
      this.localBatchData.push({
        DisputeId: currentUser.DisputeId,
        DisputeState: this.batchStatus,
        DisputeMoney: DisputeMoney || '',
        DisputeRemark: DisputeRemark || ''
      });

      // 更新本地数据
      const index = this.order.findIndex(u => u.DisputeId === currentUser.DisputeId);
      if (index !== -1) {
        this.order[index].DisputeState = this.batchStatus;
        this.order[index].DisputeMoney = DisputeMoney;
        this.order[index].DisputeRemark = DisputeRemark;
      }

      // 递增索引并判断是否有下一项
      this.currentIndex++;
      if (this.currentIndex < this.selectedUsers.length) {
        // 初始化下一个用户的输入框（当前 currentIndex 已指向新项）
        this.selectedUsers[this.currentIndex].DisputeMoney = '';
        this.selectedUsers[this.currentIndex].DisputeRemark = '';
        Message.info('请继续处理下一个纠纷');
      } else {
        Message.info('所有纠纷已处理完毕，点击"确认提交"完成操作');
      }
    },
    // 修改确认按钮逻辑
    confirmBatchReview() {
      if (this.currentIndex < this.selectedUsers.length && this.batchStatus) {
        this.handleNextItem();
      }

      if (this.localBatchData.length === 0) {
        Message.warning('没有需要提交的数据');
        return;
      }

      this.batchUploadToServer()
        .then(() => {
          // 先关闭弹窗，再处理后续逻辑（如刷新数据）
          this.deleteDialogVisible = false;

          // 重置状态（可选：根据需求决定是否保留）
          this.detail = {};
          this.selectedUsers = [];
          this.currentIndex = 0;
          this.localBatchData = [];
          this.deleteDialogVisible = false;
          // 刷新数据（异步操作不影响弹窗关闭）
          this.goodsorder();
          Message.success('已提交全部审核数据');
          this.deleteDialogVisible = false;
        })
        .catch(error => {
          this.deleteDialogVisible = false;
          console.error('批量提交失败', error);
          Message.error('批量审核失败，请重试');
        });
    },

    // 批量上传方法
    batchUploadToServer() {
      return new Promise((resolve, reject) => {
        const requests = this.localBatchData.map(item =>
          this.updateGoodsStatus(item)
        );

        Promise.all(requests)
          .then(resolve)
          .catch(reject);
      });
    },

    // 修改原更新方法，支持批量处理
    updateGoodsStatus(item) {
      return new Promise((resolve, reject) => {
        jq.ajax({
          type: 'put',
          url: `http://127.0.0.1:3000/orderfix`,
          data: {
            DisputeId: item.DisputeId,
            DisputeState: item.DisputeState,
            DisputeMoney: item.DisputeMoney,
            DisputeRemark: item.DisputeRemark
          },
          success(res) {
            if (res.status === 200) {
              this.deleteDialogVisible = false;
              resolve(res);
            } else {
              reject(res);
            }
          },
          error(err) {
            reject(err);
          }
        });
      });
    },

    // 打开批量审核弹窗时初始化
    deleteSelectedUsers() {
      const selectedRows = this.$refs.userTable.selection;
      if (selectedRows.length === 0) {
        Message.info('请选择需要审核的交易');
        return;
      }
      this.selectedUsers = selectedRows
        .filter(user => user.DisputeState === '待处理')
        .map(user => ({
          ...user,
          DisputeMoney: '',
          DisputeRemark: '',
          batchDiscount: null // 折扣初始化
        }));
      if (this.selectedUsers.length > 0) {
        this.currentIndex = 0;
        this.deleteDialogVisible = true;
      } else {
        Message.info('没有待处理的交易可供批量审核');
        this.deleteDialogVisible = false;
      }
    },
  },
  created() {
    this.totalUsers = this.order.length;
  }
}
</script>

<style lang="less" scoped>
.process {
  padding: 70px 20px 20px 230px;
  background-color: #F9FAFB;
  width: 100%;

  h2 {
    display: block;
    visibility: visible;
    margin-left: 10px;
  }

  .search-container {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid #e9e8e8;
    background-color: white;
    position: relative;
    margin: 20px 10px;
    width: 98%;

    .el-button {
      border-radius: 8px;
      background-color: #1f3ff1;
      color: white;

      img {
        position: relative;
        top: 2px;
        width: 15px;
        height: 15px;
      }
    }

    .height {
      height: 40px;
      margin-top: 20px;
      margin-right: 20px;
    }

    .box {
      display: flex;
      justify-content: space-evenly;
      width: 100%;
      margin-top: 10px;

      button {
        width: 200px;
      }
    }

    select {
      margin-right: 10px;
    }

    .el-input {
      margin: 20px;
      width: 400px;
      height: 40px;
      padding-left: 20px;
      color: #5d5a5a;
      font-size: 16px;

      span {
        padding: 9px;
      }

      input {
        background-color: white;
        padding: 10px 26px;
        border-radius: 8px;
        border: 1px solid #e2e2e2;
        color: #5d5a5a;
      }
    }

    .border {
      border: 1px solid #e2e2e2;
      border-radius: 8px;
      background-color: transparent;
      font-size: 16px;

      img {
        position: relative;
        top: 3px;
        right: 2px;
        width: 16px;
        height: 16px;
      }
    }

    .color {
      background-color: #1f3ff1;
      color: white;
    }

  }

  .pop {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;

    .picture {
      border: 1px solid #ccc;
      width: 200px;
      height: 150px;
      border-radius: 8px;
      margin-right: 10px;
    }

    span {
      font-size: 16px;
      color: black;
      margin: 30px;
    }

    p {
      font-size: 17px;
      margin-top: 5px;

      span {
        font-size: 16px;
        color: black;
        margin-left: 5px;
      }
    }
  }

  .detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    width: 100%;
  }

  .detail-main {
    width: 90%;
  }

  .detail-item {
    flex: 1;
    margin-right: 10px;

    .picture {
      border: 1px solid #ccc;
      width: 200px;
      height: 150px;
      border-radius: 8px;
      margin-right: 10px;
    }
  }

  .detail-label {
    display: block;
    color: rgb(160, 160, 160);
    margin-bottom: 5px;
    font-weight: normal;
  }

  .close-button {
    background-color: #f4f4f4;
    color: #666;
    border: 1px solid #ccc;
  }

  .send-button {
    background-color: #409eff;
    color: white;
    border: none;
  }

  .confirm-button {
    background-color: #27c24c;
    color: white;
    border: none;
  }

  .stats-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px 10px;
  }

  .stat-item {
    width: calc(50%-20px);
    margin-bottom: 20px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid #e9e8e8;
    background-color: white;
    border-radius: 5px;
    padding: 20px;
  }

  .stat-item-1 {
    width: calc(25%-20px);
    margin-bottom: 20px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid #e9e8e8;
    background-color: white;
    border-radius: 5px;
    padding: 20px;
  }

  .stat-value {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .stat-change {
    color: green;
  }

  .increase {
    color: green;
  }

  .decrease {
    color: red;
  }

  .stat-tip {
    color: rgb(255, 115, 0);
  }
}
</style>